<template>
  <div class="container">
    <div class="item" v-for="(item, index) in films" :key="index" @click="handlefilm(item.title)">
      <div class="image-box"><img class="image" :src="item.pic" alt="电影"></div>
      <div class="info-box">
        <div class="title">{{ item.title }}</div>
        <div class="raiting">评分:{{ item.raiting }}
          <img :src="img" v-for="(img, index) in filmRaiting(item.raiting)" :key="index">
        </div>
        <!-- 使用join方法拼接数组内的字符串 -->
        <div class="info">{{ item.labels.join('/') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue"
import axios from "@/request"
// 导入路由对象
import { useRouter } from 'vue-router'
// 实例化路由对象
const router = useRouter()
const films = ref([])
// 定义星星的路径
const star = '/src/assets/star.png'
const starEmpty = '/src/assets/starEmpty.png'
// 接收分数来返回星星数量的函数
function filmRaiting(raiting) {
  const itemClasses = []
  // 先四舍五入再除以二在向下取整
  let score = Math.floor(Math.round(raiting) / 2)
  for (let i = 0; i < 5; i++) {
    if (score > 0) {
      itemClasses.push(star)
      score--
    } else {
      itemClasses.push(starEmpty)
    }
  }
  return itemClasses
}
// 点击进入详情页
function handlefilm(title) {
  // 传id`参数
  router.push({ path: '/film', query: { title } })
}
onMounted(() => {
  axios.get(`films/top250`).then((res) => {
    if (res.code == 200) {
      films.value = res.result
    }
  })
})
</script>

<style lang="stylus" scoped>
  .container
    width 800px
    border:1px solid #c1c1c1
    padding:40px
    margin:50px auto
    vertical-align:bottom
    .item
      padding 20px
      border-bottom:1px dashed #c1c1c1
      display:flex
      .image-box
        margin-right:30px
        .image 
          width 100px
          height 139px
      .info-box
        padding:5px
        .title
          font-size 16px
          color:#29b8db
          margin-bottom 15px
        .raiting
          margin-bottom 15px
          img
            width 19px
        .info
          font-size 14px
          color: #888;
</style>